<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding: 100px;
        }

        label {
            position: relative;
            display: inline-block;
        }

        input {
            display: block;
        }

        span {
            position: absolute;
            top: calc(100% + 10px);
            left: 0;
            width: 100%;
            background: yellowgreen;
            padding: 10px;
            color: white;
            transition: 0.5s transform cubic-bezier(.25, .1, .3, 1.5);
            transform-origin: 1.4em -0.4em;
        }

        span::before {
            position: absolute;
            width: 10px;
            height: 10px;
            transform: rotateZ(45deg);
            content: '';
            display: block;
            top: -4px;
            left: 20px;
            background: yellowgreen;
            z-index: 0;
        }

        input:not(:focus) + span {
            transform: scale(0);
            transition: 0.25s;
        }

        /*input:focus + span{*/
        /*    animation: elastic-grow 0.5s;*/
        /*}*/

        /*@keyframes elastic-grow {*/
        /*    from {*/
        /*        transform: scale(0);*/
        /*    }*/

        /*    70% {*/
        /*        transform: scale(1.1);*/
        /*        animation-timing-function: cubic-bezier(.1, .25, 1, .25);*/
        /*    }*/
        /*}*/

    </style>
</head>
<body>
<label>
    Your username: <input type="text">
    <span>
        可输入字母、数字、下划线(_)或连字符(-)
    </span>
</label>
</body>
</html>
